JS callback functions

revision:

A callback function is a function passed into another function as an argument

This callback function is then invoked inside the outer function to complete some kind of routine or action.

This technique allows a function to call another function. A callback function can run after another function has finished.

JavaScript functions are executed in the sequence they are called, and Not in the sequence they are defined.

example: call back function

code: 
                    <div>
                        <p class="spec" style="margin-left:5vw;margin-top: 1vw;" id="callback01"></p>
                        <p class="spec" style="margin-left:5vw;margin-top: 1vw;" id="callback01A"></p>
                        <p class="spec" style="margin-left:5vw;margin-top: 1vw;" id="callback01B"></p>
                        <p class="spec" style="margin-left:5vw;margin-top: 1vw;" id="callback01C"></p>
                    
                    </div>
                    <script>
                        function greet(name, callback) {
                            console.log('Hi' + ' ' + name);
                            document.getElementById("callback01").innerHTML = "Hi" + " " + name;
                            callback();
                        }
                        // callback function
                        function callMe() {
                            console.log('I am a callback function');
                            document.getElementById("callback01A").innerHTML = "I am a callback function."
                        }
                        // passing function as an argument
                        greet('Peter', callMe);
        
                        let callback = function() {
                            console.log("Done!");
                            document.getElementById("callback01B").textContent = "Done!"
                        }
                        setTimeout(callback, 2000);
        
                        setTimeout(function() {
                            console.log("Well done!");
                            document.getElementById("callback01C").textContent = "Well done!"
                        }, 3000);
               
                   </script>

When to use callbacks?

Callbacks make sure that a function is not going to run before a task is completed, but will run right after the task has completed. It helps to develop asynchronous JavaScript code and keeps it safe from problems and errors.

example: when to use call back functions

code: 
                        <div>
                            <p class="spec" style="margin-left:5vw;margin-top: 1vw;" id="callback02"></p>
                            <p class="spec" style="margin-left:5vw;margin-top: 1vw;" id="callback02A"></p>
                            <p class="spec" style="margin-left:5vw;margin-top: 1vw;" id="callback02B"></p>
                            <p class="spec" style="margin-left:5vw;margin-top: 1vw;" id="callback02C"></p>
                        </div>
                        <script>
                            // callback will be executed just after ending of add() function
                            function add(a, b , callback){
                                document. getElementById("callback02").innerHTML = `The sum of ${a} and ${b} is ${a+b}.` +"<br>";
                                callback();
                            }
                            // disp() function is called just after the ending of add() function 
                            function disp(){
                            document.getElementById("callback02A").innerText = 'This must be printed after addition';
                            }
                            // Calling add() function
                            add(5,6,disp);    
                                
                            function adder(c, d , callback1){
                                document.getElementById("callback02B").innerHTML = `The sum of ${c} and ${d} is ${c+d}.` +"<br>";
                                callback1();
                            }
                            adder(15,16,function disp(){
                                document.getElementById("callback02C").innerHTML= 'This must be printed after the addition is finished.';
                            });
                    </script>

Callback as an arrow function

Using callback function as an ES6 arrow function can reduce lines of code.

example: callback as an arrow function

code: 
                            <div>
                                <p class="spec" style="margin-left:5vw;margin-top: 1vw;" id="callback04"></p>
                                <p class="spec" style="margin-left:5vw;margin-top: 1vw;" id="callback04A"></p>
                                <p class="spec" style="margin-left:5vw;margin-top: 1vw;" id="callback04B"></p>
                                <p class="spec" style="margin-left:5vw;margin-top: 1vw;" id="callback04C"></p>
                                
                            </div>
                            <script>
                                const compute = (n1, n2, callback) => callback(n1, n2);
                                const sum = (n1, n2) => n1 + n2;
                                const product = (n1, n2) => n1 * n2;
                
                                console.log(compute(5, 3, sum));    
                                console.log(compute(5, 3, product)); 
                                document.getElementById("callback04").innerText = "Sum: " + compute(5, 3, sum);
                                document.getElementById("callback04A").innerText = "Product: " + compute(5, 3, product);
                
                                setTimeout(() => { 
                                document.getElementById("callback04B").innerText = "This message is shown after 3 seconds";
                                console.log("This message is shown after 3 seconds");
                                }, 3000);
                        </script>

Events and callback

Most of the callbacks in JavaScript are tied to an event like a timer, API request, or reading a file.

example: events and call back

code: 
                        <div>
                            <button style="margin-left:5vw;" id="callback-btn">Click here</button>
                            <p class="spec" style="margin-left:5vw;margin-top: 1vw;" id="callback05"></p>
                            <p class="spec" style="margin-left:5vw;margin-top: 1vw;" id="callback05A"></p>
                            <img src='car2.jpg' id='image' />
                            <p class="spec" style="margin-left:5vw;margin-top: 1vw;" id="callback05B"></p>
                            <p class="spec" style="margin-left:5vw;margin-top: 1vw;" id="callback05C"></p>
                        </div>
                        <style>
                            img{width: 40vw; height: 25vw;}
                        </style>
                        <script>
                            document.getElementById("callback-btn").addEventListener("click", function() {    
                            console.log("User has clicked on the button!");
                            document.getElementById("callback05").innerHTML = "The button has been clicked!";
                            });
            
                            const id = setInterval(() => document.getElementById("callback05A").innerHTML 
                            += ('tick ⏰'), 1e3); 
                            setTimeout(() => clearInterval(id), 5e3);
                            
                            var image = document.querySelector("#image")
                            image.addEventListener("mouseover", function() {
                                console.log("The user has moused over the image.");
                                document.getElementById("callback05B").innerHTML = "The user has moused over 
                                the image.";
                            });
                        </script>